<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- swiper-css -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <!-- 字体图标 awesome-->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <title>UI作品</title>
</head>

<body>
    <header>
      <div class="logo">UI作品</div>
      <nav>
          <a href="#home">首页</a>
          <a href="#me">关于我</a>
          <a href="#advertise">UI设计</a>
          <a href="#guoji">国际物流</a>
          <a href="#album">画册设计</a>
      </nav>
      <div class="burger">
          <div class="burger-line1"></div>
          <div class="burger-line2"></div>
          <div class="burger-line3"></div>
      </div>
    </header>
    
    
    <div class="content">
        <!-- 封面 -->
        <div id="home" class="home">
            <div><img src="images/封面/背景文字.png" alt=""></div>
            <div class="zhuti">
                <ul>
                    <li><img src="images/封面/主体圈圈.png" alt=""></li>
                    <li><img src="images/封面/大标.png" alt=""></li>
                    <li><img src="images/封面/NAME.饶小权TEL.15827385305拷贝5.png" alt=""></li>
                    <li><img src="images/封面/手指.png" alt=""></li>
                    <li><img src="images/封面/右手指.png" alt=""></li>
                    <li><img src="images/封面/椭圆1拷贝4.png" alt=""></li>
                    <li><img src="images/封面/cube-立方体1.png" alt=""></li>
                    <li><img src="images/封面/cube-立方体2.png" alt=""></li>
                    <li><img src="images/封面/cube-立方体3.png" alt=""></li>
                    <li><img src="images/封面/cube-立方体4.png" alt=""></li>
                </ul>
            </div>
        </div>
        <section class="intro">
            <div class="title1">
                <h2>作品简介</h2>
                <img src="images/作品01/INTRODUCTION拷贝.png" alt="">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="items">
                <div class="item">
                    <div class="pic">
                        <img src="images/作品01/code01.png" alt="">
                        <p>基础前端+动效的设计师</br>
                            Designers understanding code
                        </p>
                    </div>
                    <p>
                        关于我<br>
                        ABOUT ME
                    </p>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/作品01/code02.png" alt="">
                        <p style="color: black;">UI设计</br>
                            UI DESIGN
                        </p>
                    </div>
                    <p>
                        Tospino Mall-项目<br>
                        &物流网点PDA项目
                    </p>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/作品01/code03.png" alt="">
                        <p>WEB-国际物流<br>
                            International Logistics
                        </p>
                    </div>
                    <p>
                        国际物流全流程设计<br>
                        Whole Design
                    </p>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/作品01/code04.png" alt="">
                        <p>AE动效·爱好·其他</br>
                            OTHER ARTWORKS
                        </p>
                    </div>
                    <p>
                        其他设计作品<br>
                        OTHER ARTWORKS
                    </p>
                </div>
            </div>

        </section>
        <section id="me" class="me">
            <div class="aboutme">
                <div class="leftme">
                    <div class="picme">
                        <p>PERSONAL</p>
                        <span>
                            <i></i>
                            <p>PROFILE</p>
                        </span>
                        <h4>邮箱/Email</h4>
                        <p class="email">158219313@qq.com</p>
                        <h4>电话/Phone</h4>
                        <p class="phone">15827385305</p>
                        <h4>
                            <i></i>
                            作品链接
                        </h4>
                        <p>http://xiao_quan_lao.gitee.io/<br>heimamm/zuopin.html</p>
                    </div>
                    <div class="photo">
                        <img src="images/作品02/微信图片.jpg" alt="">
                    </div>
                    <div class="chang"></div>
                </div>
                <div class="rightme">
                    <ul class="chang1">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="item1">
                        <div>
                            <div class="guanyu">
                                <img src="images/作品02/介绍图标.png" alt="">
                                <h2>关于我/About me</h2>
                            </div>
                            <h2>饶小权/Yizhou</h2>
                        </div>
                        <span class="dian">
                            <span></span>
                            <span></span>
                        </span>
                    </div>
                    <div class="item2">
                        <p>经验3年</p>
                        <p>地址:深圳五和</p>
                        <p>求职意向:UI设计师</p>
                        <p>出生年月:1997.08</p>
                    </div>
                    <div class="item3">
                        <p>学历:全日制大专、自考本科</p>
                        <p>毕业于:武汉职业技术学院、湖北工业大学</p>
                    </div>
                    <ul class="chang2">
                        <li>
                            <p>UI设计</p>
                        </li>
                        <li>
                            <p>运营活动</p>
                        </li>
                        <li>
                            <p>基础前端</p>
                        </li>
                        <li>
                            <p>AE动效</p>
                        </li>
                    </ul>
                    <div class="item4">
                        <img src="images/作品02/微信图片_20210408153556.png" alt="">
                    </div>
                </div>
            </div>
            <div class="ability">
                <div class="ability1">
                    <img src="images/作品02/介绍图标.png" alt="">
                    <h2>技术能力/Technical ability </h2>
                </div>
                <div class="ability2">
                    <ul>
                        <li>
                            <h3>经验方面</h3>
                            <p>三年UI、WEB设计经验。能独立完成项目设计全流程。参与并设计tospinomall商城移动端，
                                卜鸣物流PDA项目，卜鸣集团官网，国际物流官网，
                                商家站点后台设计等等，拥有大量的项目经历。

                            </p>
                        </li>
                        <li>
                            <h3>代码&AE特效</h3>
                            <p>熟悉前端基础知识：HTML、
                                CSS动画。可以用AE制作基础特效动画。并与前端开发沟通实现。</p>
                        </li>
                        <li>
                            <h3>特长方面</h3>
                            <p>业余时间钻研三维建模设计，配合建模可完成视觉类设计，学习能力强，喜欢阅读和思考，不断克服并解决新问题。</p>
                        </li>
                    </ul>
                </div>
                <div class="ability3">
                    <h3>常用软件</h3>
                    <ul>
                        <li>
                            <img src="images/作品02/Figma.png" alt="">
                            <p>Figma</p>
                        </li>
                        <li>
                            <img src="images/作品02/Ps.png" alt="">
                            <p>Photoshop</p>
                        </li>
                        <li>
                            <img src="images/作品02/Ai.png" alt="">
                            <p>illustrator</p>
                        </li>
                        <li>
                            <img src="images/作品02/Adobe Ae.png" alt="">
                            <p>Ae
                            </p>
                        </li>
                        <li>
                            <img src="images/作品02/c4d.png" alt="">
                            <p>C4D</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="works">
                <div class="works1">
                    <img src="images/作品02/介绍图标.png" alt="">
                    <h2>工作经历 / Work experience</h2>
                </div>
                <div class="works2">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="jingli">
                        <div class="time">
                            <img src="images/作品02/time.png" alt="">
                            <div class="company">
                                <div class="xiucai">
                                    <p>2019.06 ~ 2022.01</p>
                                    <span>
                                        <img src="images/作品02/椭圆3.png" alt="">
                                        <h3>卜鸣网络科技有限公司</h3>
                                    </span>
                                    <h4>UI设计师 / 产品部</h4>
                                    <p>1.主要负责产品界面设计，公司官网设计与创意分析，
                                        营销落地页设计。</p>
                                    <p>2.负责视觉，UI动效等工作。。</p>
                                    <p>3.优化设计规范与工作流程，维护并更新APP及官网的设计工作。</p>
                                </div>
                                <div class="huaimei">
                                    <p>2017.06 ~ 2019.06</p>
                                    <span>
                                        <img src="images/作品02/椭圆3拷贝.png" alt="">
                                        <h3>深圳市秀才教育有限公司</h3>
                                    </span>
                                    <h4>UI设计师 / 项目部</h4>
                                    <p>1.配合教务部门美工设计，产品详情页排版，设计和美化。</p>
                                    <p>2.能够挖掘产品卖点，将卖点体现到图片设计当中。</p>
                                    <p>3.总结和分析同行的主图和详情页的优点，运用结合店铺当中。</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="advertise" class="advertise">
            <div class="xiangqing">
                <div class="ad1">
                    <img src="images/作品03/技术能力.png" alt="">
                    <p>APP&nbsp设计/APP&nbsp;design</p>
                    <div></div>
                </div>
                <h3>PROJECT ADVERTISING</h3>
                <h4>物流用户端 app设计思路</h4>
                <div class="ad2">
                    <div class="ad2a">
                        <img src="images/作品03/手机.png" alt="">
                        <div>
                            <h4>移动端设计</h4>
                            <h6>Mobile terminal design</h6>
                        </div>
                        <div></div>
                        <div>
                            <p>卜鸣物流</p>
                            <h6>1.0.0</h6>
                        </div>
                    </div>
                    <div class="ad2b">
                        <h4>2021</h4>
                        <h3>物流用户端·设计</h3>
                        <p>app</p>
                        <div></div>
                        <p>一舟</p>
                    </div>
                    <div class="ad2c"></div>
                </div>
            </div>
        </section>
        <section class="pro">
            <div class="pro1">
                <ul>
                    <li>
                        1
                    </li>
                    <li>
                        <p>
                            <em style="font-size: .28125rem;
                            font-weight: 600;
                            color: #fc9115;">P</em>
                            roject<br>description
                        </p>
                    </li>
                    <li>
                        项目说明
                    </li>
                    <li>
                        <span>
                            <img src="images/作品03/矩形3.png" alt="">
                        </span>
                        <div>
                            <img src="images/作品03/图层10.png" alt="">
                            <p>本地物流是卜鸣集团开发的一款物流快递app。开发此款产品主要是适应平台自身发展需要。产品适用于
                                一线操作人员,基层管理人员,高层决策人员.通过移动的优势以及与企业现有平台的衔接,稳步提高企业
                                生产效率,物流配送效率.同步企业物流系统和移动系统数据.
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="pro2">
                <ul>
                    <li class="pro2up">
                        2
                    </li>
                    <li>
                        <p>
                            <em style="font-size: .28125rem;
                            font-weight: 600;
                            color: #fc9115;">P</em>
                            roduct<br>positioning
                        </p>
                    </li>
                    <li>
                        用户人群
                    </li>
                    <li>
                        <div class="pro2a">
                            <div class="touxiang">
                                <img src="images/作品03/头像.png" alt="">
                            </div>
                            <div>
                                <h3>使用人群</h3>
                                <p>一线操作人员,基层管理人员,入驻商家,公司决策人员.
                                    多家优质第三方物流商,共同搭建非洲本地的物流网络.</p>
                            </div>

                        </div>
                        <div class="pro2b">
                            <h3>产品目标</h3>
                            <ul class="target">
                                <li>
                                    <img src="images/作品03/图层10.png" alt="">
                                    <p>提供跨境头程海运/空运物流服务</p>
                                </li>
                                <li>
                                    <img src="images/作品03/图层10.png" alt="">
                                    <p>提供启运国出口报关,目的国清关服务</p>
                                </li>
                                <li>
                                    <img src="images/作品03/图层10.png" alt="">
                                    <p>货物运输途中,提供全方位的保险机制</p>
                                </li>
                                <li>
                                    <img src="images/作品03/图层10.png" alt="">
                                    <p>清晰透明的账单核对,到港前支付运费.</p>
                                </li>
                            </ul>
                        </div>
                        <span>
                            <img src="images/作品03/矩形3.png" alt="">
                        </span>
                    </li>
                </ul>
            </div>
            <div class="pro3">
                <ul>
                    <li class="pro2up">
                        3
                    </li>
                    <li>
                        <p>
                            <em style="font-size: .28125rem;
                            font-weight: 600;
                            color: #fc9115;">D</em>
                            esign<br>goal
                        </p>
                    </li>
                    <li>
                        <p>
                            设计方向
                        </p>
                    </li>
                    <li>
                        <div class="el">
                            <div class="el1">
                                <h3>高效</h3>
                                <p>Efficient</p>
                            </div>
                            <p>效率</p>
                            <p>沟通</p>
                        </div>
                        <div class="el">
                            <div class="el1">
                                <h3>精简</h3>
                                <p>Simple</p>
                            </div>
                            <p>有序</p>
                            <p>信息清晰</p>
                        </div>
                        <div class="el">
                            <div class="el1">
                                <h3>专业</h3>
                                <p>Profession</p>
                            </div>
                            <p>严谨</p>
                            <p>安全性</p>
                        </div>

                    </li>
                    
                   
                </ul>
            </div>
        </section>

        <section class="figma">  
                <img src="images/作品04/Frame01.png" alt="">
                <img src="images/作品04/第一屏.png" alt="">
                <img src="images/作品04/第二屏.png" alt="">
                <img src="images/作品04/第三屏.png" alt="">
                <img src="images/作品04/第四屏.png" alt="">
                
        </section>
        <section id="guoji" class="figma">
            <img src="images/作品04/Frame 755.png" alt="">
        </section>
        
        <section class="process">
            <div class="cess1">
                <ul>
                    <li class="pro2up">
                        7
                    </li>
                    <li>
                        <p>
                            <em style="font-size: .28125rem;
                            font-weight: 600;
                            color: #fc9115;">W</em>
                            ork<br>Process
                        </p>
                    </li>
                    <li>
                        <p>
                            工作过程
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cess2">
                <h3>WORKING ATATUS</h3>
                <P>工作屏幕</P>
                <div>
                    <img src="images/作品04/图层9.png" alt="">
                </div>
            </div>
            <div class="cess3">
                <h3>A DRAFT PLAN</h3>
                <P>草稿规划</P>
                <div>
                    <img src="images/作品04/图层10.png" alt="">
                </div>
                <p>工作时总会把整体框架构思好,再将问题一步一步拆解,逐个解决</p>
                <p>(PS:这六亲不认的笔记,仅作参考吧^^)</p>
            </div>
        </section>
       
        <section id="album" class="album">
            <div class="album1">
                <ul>
                    <li class="pro2up">
                        8
                    </li>
                    <li>
                        <p>
                            <em style="font-size: .28125rem;
                            font-weight: 600;
                            color: #fc9115;">A</em>
                            lbum<br>Design
                        </p>
                    </li>
                    <li>
                        画册设计
                    </li>
                </ul>
            </div>
            <div class="album2">
                <div class="uptitle">
                    <div class="lf">
                        <h2>万能黄金网格</h2>
                        <p>Super Grid</p>
                    </div>
                    <div class="right">
                        <p>DESIGN BASIS</p>
                        <p>理论依据</p>
                    </div>
                </div>
                <div class="alpic1">
                    <div>
                        <img src="images/作品06/图层7.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层8.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层9.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层10.png" alt="">
                    </div>
                </div>
                <p>出自:气韵设计理论</p>
                <div class="alpic2">
                    <div>
                        <img src="images/作品06/图层11.png" alt="">
                        <p>黄金比例分割（斐波那契数列）</p>
                    </div>
                    <div>
                        <img src="images/作品06/图层12.png" alt="">
                        <p>万能黄金网格（张子建）</p>
                    </div>
                </div>
                <div class="midtitle">
                    <div class="lf">
                        <h2>黄金网格介绍</h2>
                    </div>
                    <p>
                        设计中排版，黄金网格可以说是一个平面黑科技了，而这一套万能黄金网格的作者（张子建）就是一个平面大神。依据这一套理
                        论，只要遵循线的位置，都是接近黄金比例布局，变成网格的目的也就是可以更自由大篇幅去排版元素，网格可以做各种变形拉
                        伸，不会因为规则去限制设计,设计布局布线不会显得呆板僵硬。
                    </p>
                </div>
                <div class="alpic3">
                    <div>
                        <img src="images/作品06/图层13.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层14.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层15.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层16.png" alt="">
                    </div>
                </div>
                <div class="midtitle">
                    <div class="lf">
                        <h2>员工手册</h2>
                    </div>
                    <p>
                        排版主要依据黄金网格布局。员工手册是企业内部的人事制度管理规范，
                        同时又涵盖企业的各个方面，承载传播企业形象，企业文化功能。它是有效的员工
                        管理工具，员工的行动指南。"员工手册"是企业规章制度、企业文化与企业战略的浓缩，是企业内的"法律法规"，同时还起到了展示企业形象、传播企业文化的作用。 </p>
                </div>
                <div class="alpic4">
                    <div>
                        <img src="images/作品06/hua01.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua02.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua03.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua04.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua05.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua06.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua07.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua08.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua09.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua10.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua11.jpg" alt="">
                    </div>
                </div>
            </div>
        </section>
        

    </div>
    <section class="footer">
        <div class="ditu">
            <img src="images/作品06/08.jpg" alt="">
        </div>
        <p class="scrollToTop">
            <a href="#home"><i class="fa fa-chevron-up"></i></a>
          </p>
    </section>
    <script src="js/flexible.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        (function () {
            var swiper1 = new Swiper('.poster1', {
                slidesPerView: 3,
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        })();
        (function () {
            var swiper1 = new Swiper('.poster2', {
                slidesPerView: 3,
                spaceBetween: 3,
                centeredSlides: true,
                centeredSlidesBounds: true,
                centerInsufficientSlides: true,
                slidesOffsetBefore: 0,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        })();
        (function () {
            var swiper1 = new Swiper('.poster3', {
                slidesPerView: 3,
                spaceBetween: 3,
                centeredSlides: true,
                centeredSlidesBounds: true,
                centerInsufficientSlides: true,
                slidesOffsetBefore: 0,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        })();
     /*    (function () {
               var swiper1 = new Swiper('.poster4', {
                   slidesPerView: 3,
                   spaceBetween: 3,
                   centeredSlides: true,
                   centeredSlidesBounds: true,
                   centerInsufficientSlides: true,
                   slidesOffsetBefore: 0,
                   loop: true,
                   pagination: {
                       el: '.swiper-pagination',
                       clickable: true,
                   },
               });
           })(); */

    </script>
    <script src="js/smooth-scroll.polyfills.min.js"></script>
    <script src="js/index.js"></script>
   
</body>

</html>